<!-- eslint-disable @typescript-eslint/consistent-type-imports -->
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<script setup lang="ts">
import { Leafer } from 'leafer-ui'
import { BoxText } from 'src/components/MyLeaferCutom'
import { ref, onMounted } from 'vue'

const leafer = ref<Leafer>() // 存储 Leafer 实例

onMounted(() => {
  // leafer.value = new Leafer({ view: 'leafer-view' })
  // const customRect = new BoxText({
  //   text: 'A',
  //   y: 100,
  //   width: 200,
  //   height: 200,
  //   fill: 'blue',
  //   draggable: true,
  // })
  // leafer.value.add(customRect)
})
</script>

<template>
  <div id="leafer-view"></div>
</template>

<style scoped>
.add-button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 20px;
}

.add-button:hover {
  background-color: #45a049;
}

.rect {
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
  margin: 4px 0;
  background-color: #f0f0f0;
  border-radius: 4px;
}

#leafer-view {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
